<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <home-swiper :banner="banner"></home-swiper>
    <home-recommend :recommend="recommend"></home-recommend>
    <home-feature/>
    <tab-control :titles="['流行','新款','精选']" class="tab-control"></tab-control>
    <div>
      <ul>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
        <li>asddddddddddddddddddd</li>
      </ul>
      </div>
  </div>
</template>


<script>
  import NavBar from "components/common/navbar/NavBar"
  import TabControl from "components/content/tabControl/TabControl"

  import HomeSwiper from './childComps/HomeSwiper'
  import HomeRecommend from './childComps/HomeRecommend'
  import HomeFeature from './childComps/HomeFeature'
  import {getHomeMultidata} from "network/home"
  export default {
    name:'Home',
    data() {
      return {
        banner: [],
        recommend: []
      }
    },
    components: {
      NavBar,
      TabControl,
      HomeSwiper,
      HomeRecommend,
      HomeFeature
    },
    created(){
      getHomeMultidata().then(res => {
        res = res.data.data;
        console.log(res);
        this.banner = res.banner.list;
        this.recommend = res.recommend.list;
      })
    }
  }
</script>


<style lang="scss" scoped>
  #home {
    padding-top:44px;
    .home-nav {
      background-color:var(--color-tint);
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index: 9;
    }
    .tab-control{
      position:sticky;
      top:44px;
    }
  }
</style>
